<!DOCTYPE html>
<html>
<head>
    <title>Astrophysics Diagram 4.8.1</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="600" height="550"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style and parameters
        const cx = canvas.width / 2;
        const cy = 260; // Center Y, adjusted for caption
        const R0 = 160; // Radius of Earth's orbit in pixels

        // Helper function to draw an arrow
        function drawArrow(fromx, fromy, tox, toy) {
            const headlen = 10; // length of head in pixels
            const dx = tox - fromx;
            const dy = toy - fromy;
            const angle = Math.atan2(dy, dx);
            ctx.moveTo(fromx, fromy);
            ctx.lineTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
        }

        // --- Start Drawing ---
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // 1. Draw Coordinate Axes
        ctx.beginPath();
        ctx.lineWidth = 1;
        ctx.strokeStyle = 'black';
        ctx.font = "20px 'Times New Roman'";
        
        // Y-axis
        drawArrow(cx, cy + R0 + 50, cx, cy - R0 - 50);
        ctx.fillText('y', cx + 10, cy - R0 - 55);

        // X-axis
        drawArrow(cx - R0 - 50, cy, cx + R0 + 50, cy);
        ctx.fillText('x', cx + R0 + 55, cy + 8);
        
        // Origin label
        ctx.font = "22px 'SimSun'";
        ctx.fillText('O(太阳)', cx + 5, cy + 28);
        
        ctx.stroke();

        // Add ticks on x-axis
        ctx.beginPath();
        ctx.moveTo(cx - R0, cy - 5);
        ctx.lineTo(cx - R0, cy + 5);
        ctx.moveTo(cx + R0, cy - 5);
        ctx.lineTo(cx + R0, cy + 5);
        ctx.stroke();


        // 2. Draw Earth's Orbit (Circle)
        ctx.beginPath();
        ctx.lineWidth = 2;
        ctx.arc(cx, cy, R0, 0, 2 * Math.PI);
        ctx.stroke();

        // 3. Draw Comet's Orbit (Parabola)
        // Equation: y = R0/2 - x^2/(2*R0) -> canvas_y = cy - (R0/2 - (canvas_x - cx)^2 / (2*R0))
        ctx.beginPath();
        ctx.lineWidth = 2;
        const parabolaStart = cx - R0 - 20;
        const parabolaEnd = cx + R0 + 20;
        ctx.moveTo(parabolaStart, cy - (R0 / 2 - Math.pow(parabolaStart - cx, 2) / (2 * R0)));
        for (let x_canvas = parabolaStart; x_canvas <= parabolaEnd; x_canvas++) {
            const y_math = R0 / 2 - Math.pow(x_canvas - cx, 2) / (2 * R0);
            ctx.lineTo(x_canvas, cy - y_math);
        }
        ctx.stroke();
        
        // 4. Labels and Points
        ctx.fillStyle = 'black';
        ctx.font = "24px 'SimSun'";

        // Earth
        const earthAngle = -Math.PI / 4; // 45 degrees in 4th quadrant (math first quadrant)
        const earthX = cx + R0 * Math.cos(earthAngle);
        const earthY = cy + R0 * Math.sin(earthAngle);
        ctx.beginPath();
        ctx.arc(earthX, earthY, 5, 0, 2 * Math.PI);
        ctx.fill();
        ctx.fillText('地球', earthX + 10, earthY + 8);

        // Comet
        ctx.fillText('彗星', cx - 140, cy - 130);

        // R0 label
        ctx.font = "22px 'Times New Roman'";
        ctx.fillText('R', cx - R0/2 - 10, cy + 25);
        ctx.font = "16px 'Times New Roman'";
        ctx.fillText('0', cx - R0/2, cy + 28);

        // 5. Polar coordinates for Comet (r, φ)
        // Point on parabola in 2nd math quadrant
        const p_math_x = -0.5 * R0;
        const p_math_y = R0/2 - Math.pow(p_math_x, 2) / (2 * R0);
        const p_canvas_x = cx + p_math_x;
        const p_canvas_y = cy - p_math_y;

        // Dashed line 'r'
        ctx.beginPath();
        ctx.setLineDash([4, 4]);
        ctx.lineWidth = 1.5;
        ctx.moveTo(cx, cy);
        ctx.lineTo(p_canvas_x, p_canvas_y);
        ctx.stroke();
        ctx.setLineDash([]); // Reset dash

        // Angle arc 'φ'
        const angleRadius = 40;
        const startAngle = -Math.PI / 2; // Positive y-axis
        const endAngle = Math.atan2(p_canvas_y - cy, p_canvas_x - cx);
        ctx.beginPath();
        ctx.arc(cx, cy, angleRadius, startAngle, endAngle);
        ctx.stroke();
        
        // Labels for 'r' and 'φ'
        ctx.font = "22px 'Times New Roman'";
        ctx.fillText('r', (cx + p_canvas_x)/2 + 8, (cy + p_canvas_y)/2 - 8);
        ctx.fillText('φ', cx - 20, cy - 45);


        // 6. Figure Caption
        ctx.font = "24px 'SimSun'";
        ctx.textAlign = 'center';
        ctx.fillText('力图 4.8.1', cx, canvas.height - 20);

    </script>
</body>
</html>